$(document).ready(function() {


    // 滚动条监听
    $(document).scroll(function(e) {
        var scrollTop = $(document).scrollTop();
        var selector = '.fixbar-2';
        if (scrollTop >= (120 - 54)) {
            if (!isVisible(selector)) {
                $(selector).show();
                toAnimIt(selector, 'fadeInDown');
            }
        } else {
            if (isVisible(selector)) {
                toAnimIt(selector, 'fadeOutUp', function() {
                    $(selector).hide();
                });
            }
        }
    });

    // 数据显示
    var parameter = {
        id: getParameter('id')
    };
    Apis.getArticle(parameter, function(response) {
        console.log('Article:', response.data);

        var data = response.data;

        var flow2OpSamplesList = data.flowDescription.map(function(m) {
            var flow = {uuid: uuid(), flowId: m.id, flow: m.tilte, opSampleId: 0, opSamples: ''};
            var opSamples = m.opSamples ? m.opSamples[0] : null;
            if (opSamples) {
                flow.opSampleId = opSamples.id;
                flow.opSamples = opSamples.content;
                flow.tips = opSamples.tips;
                flow.tipsColor = opSamples.tipsColor;
            }
            return flow;
        });
        // flow2OpSamplesList = [
        //     {uuid: uuid(), flow: 1, flowName: '测试流程简述1', opSamples: '<p>测试操作规范1</p><p><img src="http://mp-misumi.local.com/preview/mockup/medias/video-poster.gif"></p>'},
        //     {uuid: uuid(), flow: 2, flowName: '测试流程简述2', opSamples: '<p>测试操作规范2</p><p><img src="http://mp-misumi.local.com/preview/mockup/medias/video-poster.gif"></p>'}
        // ];
        // data.relatedVideo = [
        //     {
        //         id: 1,
        //         videoUrl: ''
        //     }
        // ];
        // data.relatedArticle = [
        //     {
        //         id: 24,
        //         articleId: 32,
        //         relateArticleId: 29,
        //         relateArticleTitle: '相关文章1',
        //         index: 1,
        //         lang: null
        //     },
        //     {
        //         id: 24,
        //         articleId: 32,
        //         relateArticleId: 29,
        //         relateArticleTitle: '相关文章2',
        //         index: 1,
        //         lang: null
        //     },
        //     {
        //         id: 24,
        //         articleId: 32,
        //         relateArticleId: 29,
        //         relateArticleTitle: '相关文章3',
        //         index: 1,
        //         lang: null
        //     }
        // ];
        // data.relatedVideo = [
        //     {
        //         id: 1,
        //         videoUrl: ''
        //     }
        // ];

        // 标题
        showArticleTitle(data.articleNo + '.' + data.title);

        // 摘要
        showArticleSummary(data.summary);

        // 流程简述 & 操作范例
        showArticleProcessStep(flow2OpSamplesList);
        showArticleStepStandard(flow2OpSamplesList);

        // 备注
        showArticleRemark(data.remark);

        // 视频
        showArticleVideo(data.articleVideo);

        // 相关文章
        showArticleRelatedPost(data.relatedArticle);

        // 相关视频
        showArticleRelatedVideo(data.relatedVideo);

        // 标签

    });

});

// 标题
function showArticleTitle(title) {

    showLocationPath([
        {href: 'home', text: '首页'},
        {href: 'preview', text: '预览'},
        {href: 'detail', text: title}
    ]);

    $('.mp-post-title').html(title);

}

// 摘要
function showArticleSummary(summary) {

    $('.mp-post-summary').html(summary);

}

// 流程简述
function showArticleProcessStep(flow2OpSamplesList) {
    var contentElement = $('.mp-post-process-step');
    flow2OpSamplesList.forEach(function(item, idx) {
        $('<li class="list-group-item active"/>')
            .append(
                $('<a href="#detail-step-{0}"/>'.format(item.flowId))
                    .css('font-weight', 'bold')
                    .text(item.flow)
            )
            .appendTo(contentElement);
    });
}

// 操作范例
function showArticleStepStandard(flow2OpSamplesList) {
    var contentElement = $('.mp-post-step-standard').empty();
    flow2OpSamplesList.forEach(function(item, idx) {
        var html = '';
        html += '<ul class="list-group flow-list-group" id="detail-step-1">';
        html += '    <li class="list-group-item active"><a href="#" style="font-weight: bold;"></a></li>';
        html += '</ul>';
        html += '<div class="row">';
        html += '    <div class="col-md-12">';
        html += '        <div class="mp-content">';
        html += '        </div>';
        html += '    </div>';
        html += '</div>';
        var itemContent = $('<div/>')
            .append(html)
            .appendTo(contentElement);
        $('.flow-list-group', itemContent).attr('id', 'detail-step-' + item.flowId);
        $('.flow-list-group .list-group-item a', itemContent).html(item.flow);
        $('.mp-content', itemContent).html(item.opSamples);
        $('img', itemContent).addClass('post-image');

        if ($(item.tips).text().trim()) {
            var html = '';
            html += '<div class="mp-tips-inner">';
            html += '    <div class="mp-tips">';
            // html += '        <div class="mp-tips-title">';
            // html += '            [Tips]';
            // html += '        </div>';
            html += '        <div class="mp-tips-body">';
            // html += '            这里是一个Tips<br />';
            html += '        </div>';
            html += '    </div>';
            html += '</div>';
            var tipsContent = $(html)
                .appendTo(contentElement);
            $('.mp-tips-body', tipsContent).html(item.tips);
            $('.mp-tips', tipsContent).css('background-color', item.tipsColor);
        }
    });
}

// 备注
function showArticleRemark(remark) {

    $('.mp-post-remark').html(remark);

}

// 视频
function showArticleVideo(articleVideoList) {
    if (!articleVideoList || articleVideoList.length == 0) {
        $('.mp-block-video').hide();
        return;
    }
    var html = '';
    html += '<div class="video-poster-mask">';
    html += '    <div class="video-poster-content">';
    html += '        <video class="post-video" controls="controls" preload="load" height=""/>';
    html += '    </div>';
    html += '</div>';
    var contentElement = $('.mp-post-video').empty();
    articleVideoList.forEach(function(item, idx) {
        if (item.videoUrl) {
            var itemElement = $(html)
                .data(item)
                .appendTo(contentElement);
            var url = '/support/resource/mold/zhCN/video/{0}/download'.format(item.videoUrl);
            $('video', itemElement).append(
                $('<source src="medias/video.mp4" type="video/mp4"/>')
                    .attr('src', url)
            );
        }
    });

}

// 相关文章
function showArticleRelatedPost(relatedArticleList) {
    var contentElement = $('.mp-post-related-post').empty();
    relatedArticleList.forEach(function(item) {
        $('<div class="post-related-item"/>')
            .append(
                $('<a href="#"/>')
                    .attr('data-id', item.relateArticleId)
                    .html(item.relateArticleTitle)
            )
            .appendTo(contentElement)
    });
}

// 相关视频
function showArticleRelatedVideo(relatedVideoList) {
    var html = '';
    html += '<div class="post-related-item video-item">';
    html += '    <div class="video-poster-content">';
    html += '        <video class="post-video" controls="controls" preload="load" height=""/>';
    html += '    </div>';
    html += '</div>';
    var contentElement = $('.mp-post-related-video').empty();
    relatedVideoList.forEach(function(item, idx) {
        if (item.videoName) {
            var itemElement = $(html)
                .data(item)
                .appendTo(contentElement);
            var url = '/support/resource/mold/zhCN/video/{0}/download'.format(item.videoName);
            $('video', itemElement).append(
                $('<source src="medias/video.mp4" type="video/mp4"/>')
                    .attr('src', url)
            );
        }
    });

}

// 标签
function showArticleTag(tagList) {

}


































